<template>
  <!-- 预警决策主页-主变负载模块 -->
  <div class="duty">
    <div class="duty-head">
      <div class="duty-head-top">
        <div class="duty-head-top-left"></div>
        <div class="duty-head-top-right">
          <div class="duty-head-top-right-item" v-for="(item,index) of titleData" :key="index">
            <div :class="item.id"></div>
            {{item.value}}
          </div>
        </div>
      </div>
      <div class="duty-head-center">
        <div class="duty-head-center-left">
          <div class="duty-head-center-left-item">
            <div class="greenflash"></div>主变
          </div>
          <div
            class="duty-head-center-left-item topPoin"
            @click="goDutySecond(newMainLoadCount,'0')"
          >{{newMainLoadCount.total}}</div>
        </div>
        <div class="duty-head-center-right">
          <div class="duty-head-center-right-up">
            <div
              class="duty-head-center-right-up-item topPoin"
              @click="goDutySecond(newMainLoadCount,'1')"
            >{{newMainLoadCount.typeOne}}</div>
            <div
              class="duty-head-center-right-up-item topPoin"
              @click="goDutySecond(newMainLoadCount,'2')"
            >{{newMainLoadCount.typeTwo}}</div>
            <div
              class="duty-head-center-right-up-item topPoin"
              @click="goDutySecond(newMainLoadCount,'3')"
            >{{newMainLoadCount.typeThree}}</div>
          </div>
          <div class="duty-head-center-right-down">
            <div class="duty-head-center-right-down-item">
              <div class="whiteflash" v-for="count in 5" :key="count"></div>
            </div>
            <div class="duty-head-center-right-down-item">
              <div class="greenflash" v-for="count in 5" :key="count"></div>
            </div>
            <div class="duty-head-center-right-down-item">
              <div class="blueflash" v-for="count in 5" :key="count"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="duty-bottom">
      <div class="duty-bottom-title">
        <div class="item">变电站</div>
        <div class="item">设备</div>
        <div class="item">负载率</div>
        <div class="item">油温</div>
      </div>

      <div class="marquee_box">
        <marquee v-if="newMainLoadList&&newMainLoadList.length"
          @mouseenter="marqueeEnter"
          @mouseleave="marqueeLeave"
          scrollamount="2"
          direction="up"
          style="width:100%;height:100%;"
        >
          <ul class="marquee_list" :class="{marquee_top:animate}">
            <li
              :class="index%2==0?'litwo':'lione'"
              v-for="(item, index) in newMainLoadList"
              :key="index"
              @dblclick="goDutyPage(item)"
            >
              <span>{{ item.bdzmc }}</span>
              <span>{{ item.sbmc }}</span>
              <span>{{ item.fzl }}%</span>
              <span>{{ item.ywvalue==0?'-':0 }}</span>
            </li>
          </ul>
        </marquee>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
//loadsh
import lodash from "lodash";
interface tableDataList {
  index: number;
  alarmTime: string;
  alarmPowerStation: string;
  alarmEquipment: string;
  alarmTemp: string;
}
interface objType {
  row: object;
  rowIndex: number;
}

@Component
export default class extends Vue {
  @Prop({ default: () => [] })
  mainLoadList: any;
  @Prop({ default: () => [] })
  mainLoadCount: any;

  private scrollTimer; // 滚动定时器
  private titleData = [
    {
      id: "whiteflash",
      value: "80%以下",
    },
    {
      id: "greenflash",
      value: "80%-100%",
    },
    {
      id: "blueflash",
      value: "100%以上",
    },
  ];
  private dutyData = [50, 0, 0];
  private animate: boolean = false;
  tableData: Array<tableDataList> = [
    // {
    //   index: 1,
    //   alarmTime: "110kV商西变电站",
    //   alarmPowerStation: "主变",
    //   alarmEquipment: "变压器",
    //   alarmTemp: "80°",
    // },
    // {
    //   index: 2,
    //   alarmTime: "110kV商西变电站",
    //   alarmPowerStation: "主变",
    //   alarmEquipment: "变压器",
    //   alarmTemp: "80°",
    // },
    // {
    //   index: 3,
    //   alarmTime: "110kV商西变电站",
    //   alarmPowerStation: "主变",
    //   alarmEquipment: "变压器",
    //   alarmTemp: "80°",
    // },
    // {
    //   index: 4,
    //   alarmTime: "110kV商西变电站",
    //   alarmPowerStation: "主变",
    //   alarmEquipment: "变压器",
    //   alarmTemp: "80°",
    // },
  ];
  tableSelect: Array<object> = [];

  // 单击数字跳转到二级页面
  private goDutySecond(data: any, type: any) {
    this.$router.push({
      name: "dutysecondindex",
      params: {
        dutySecondData: data,
        dutyType: type,
      },
    });
  }

  // 表格选择事件
  private handleSelectionChange(val: any): void {
    // console.log(val);

    this.tableSelect = val;
  }
  // 表格隔行变色
  private tableRowClassName({ row, rowIndex }: objType): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 0) {
      return "row1";
    } else {
      return "row2";
    }
  }
  marqueeEnter(event) {
    event.target.stop();
  }
  marqueeLeave(event) {
    event.target.start();
  }
  // 监听主编负载负载率
  get newMainLoadCount() {
    let mainLoadCount = lodash.cloneDeep(this.mainLoadCount);
    let mainArr = {
      total: 0,
      typeOne: 0,
      typeTwo: 0,
      typeThree: 0,
    };
    mainArr.total = (mainLoadCount as any).length;
    mainLoadCount.map((v: any, i: number) => {
      if (Number(v.fzl) < 80) {
        mainArr.typeOne++;
      } else if (Number(v.fzl) <= 100) {
        mainArr.typeTwo++;
      } else {
        mainArr.typeThree++;
      }
    });
    // console.log("mainArr:",mainArr)
    return mainArr;
  }

  // 监听主编负载滚动列表
  get newMainLoadList() {
    let list = this.mainLoadList || []
    return list;
  }

  // 跳转到二级主变负载页面
  private goDutyPage(dutyData: any) {
    this.$router.push({
      name: "dutyindex",
      params: { dutyData: dutyData },
    });
  }
}
</script>

<style lang="scss" scoped>
.duty {
  width: 100%;
  height: 100%;
  &-head {
    .whiteflash {
      width: 0.11rem;
      height: 0.15rem;
      background-image: url("../../../../assets/img/WarningToSolve/warning_white.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: center;
    }
    .blueflash {
      width: 0.11rem;
      height: 0.15rem;
      background-image: url("../../../../assets/img/WarningToSolve/warning_blue.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: center;
    }
    .greenflash {
      width: 0.11rem;
      height: 0.15rem;
      background-image: url("../../../../assets/img/WarningToSolve/warning_green.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: center;
    }
    width: 100%;
    height: 26%;
    // background-color: grey;
    margin-top: 4.5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    &-top {
      width: 95%;
      height: 33%;
      // background-color: pink;
      display: flex;
      &-left {
        width: 33%;
        height: 100%;
        // background-color: red;
      }
      &-right {
        flex: 1;
        height: 100%;
        // background-color: pink;
        display: flex;
        justify-content: space-around;
        &-item {
          width: 33.3%;
          height: 100%;
          // background-color: pink;
          text-align: center;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
    &-center {
      width: 95%;
      height: 67%;
      background-color: rgb(1, 71, 147);
      display: flex;
      &-left {
        width: 33%;
        height: 100%;
        // background-color: red;
        display: flex;
        &-item {
          width: 50%;
          height: 100%;
          // background-color: red;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
      }
      .topPoin {
        cursor: pointer;
      }
      &-right {
        flex: 1;
        height: 100%;
        // background-color: white;
        display: flex;
        flex-direction: column;
        &-up {
          width: 100%;
          height: 50%;
          // background-color: green;
          display: flex;
          justify-content: space-around;
          &-item {
            width: 33.3%;
            height: 100%;
            // background-color: burlywood;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
        &-down {
          width: 100%;
          height: 50%;
          // background-color: blueviolet;
          display: flex;
          justify-content: space-around;
          &-item {
            width: 33.3%;
            height: 100%;
            // background-color: blueviolet;
            text-align: center;
            display: flex;
            // justify-content: center;
            align-items: center;
            justify-content: space-around;
          }
        }
      }
    }
  }
  &-bottom {
    width: 100%;
    height: 64%;
    padding: 0.1rem 0.2rem;
    // background-color: gray;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    &-title {
      width: 100%;
      height: 10%;
      display: flex;
      justify-content: space-around;
      text-align: center;
      .item {
        font-size: 0.18rem;
        width: 25%;
      }
      > :nth-child(1) {
        width: 28%;
      }
    }
    /* 滚屏 */
    .marquee_box {
      display: block;
      position: relative;
      width: 100%;
      flex: 1;
      // height: 100%;
      overflow: hidden;
      // background-color: hotpink;
    }
    .marquee_list {
      width: 100%;
      display: block;
      cursor: pointer;
      .litwo {
        background: rgb(32, 62, 135, 0.65);
      }
    }
    .marquee_list li {
      line-height: 0.3rem;
      font-size: 0.16rem;
      width: 100%;
      display: flex;
      padding:0.1rem 0.2rem;
      box-sizing: border-box;
      justify-content: space-around;
      // background-color: red;
    }
    .marquee_list li span {
      // padding: 0 0.02rem;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 25%;
      // background-color: palegreen;
    }
    .marquee_list li > :nth-child(1) {
      width: 28%;
    }
  }
}
</style>



